<template>
  <div>
    <el-button type="danger" @click="openDialog">业务删除</el-button>

    <el-dialog :visible.sync="dialogVisible" title="业务删除" width="50%">
      <el-form :model="form" ref="form">
        <el-form-item label="客户名称" :rules="{ required: true, message: '请输入客户名称' }">
          <el-input v-model="searchName" @blur="onNameChange"></el-input>
        </el-form-item>
        <el-table :data="businessList" v-if="showBusinessList" @row-dblclick="onRowDblClick">
          <el-table-column prop="business_name" label="业务名称"></el-table-column>
        </el-table>
        <div v-if="showBusinessDetail">
          <el-form-item label="业务名称" prop="name">
            <el-input v-model="form.business_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="注册地址" prop="name">
            <el-input v-model="form.install_address" disabled></el-input>
          </el-form-item>
          <el-form-item label="运营商工单编号" prop="name">
            <el-input v-model="form.order_number" disabled></el-input>
          </el-form-item>
          <el-form-item label="运营商工单类型" prop="name">
            <el-input v-model="form.order_type" disabled></el-input>
          </el-form-item>
          
          
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="onSubmit" v-if="showBusinessDetail">删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dialogVisible: false,
      searchName: '',
      form: {
        business_name: '',
        
        install_address:'',
        order_number:'',
        order_type:'',
        
        
        
      },
      businessList: [],
      showBusinessList: false,
      showBusinessDetail: false
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
      this.resetForm();
    },
    async onNameChange() {
      if (this.searchName) {
        try {
          const response = await axios.post('/api/business/getcustid', this.searchName, {
            headers: {
              'Content-Type': 'text/plain'
            }
          });
          axios.post('/api/business/getallbusid', response.data, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            
            axios.post('/api/business/getallbus', res.data, {
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(ress =>{
              
              this.businessList = ress.data}
            )
        })
        console.log(this.businessList)
        if (this.businessList.length === 0) {
          this.$message.warning('客户名所对应的业务数为0');
        } else {
          this.showBusinessList = true;
          this.showBusinessDetail = false;
        }
      } catch (error) {
        this.$message.error('查询业务失败');
      }
    } else {
      this.showBusinessList = false;
      this.showBusinessDetail = false;
    }
  },
  onRowDblClick(row) {
    this.form = { ...row };
    this.showBusinessDetail = true;
    this.showBusinessList = false;
    
  },
  async onSubmit() {
    try {
      const res = await axios.post('/api/business/delete', this.form);
      console.log(res.data)
      this.$message.success('业务删除成功');
      this.dialogVisible = false;
    } catch (error) {
      this.$message.error('业务删除失败');
    }
  },
  resetForm() {
    this.searchName = '';
    this.form = {
      name: '',
      description: '',
      status: ''
    };
    this.businessList = [];
    this.showBusinessList = false;
    this.showBusinessDetail = false;
  }
}
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
